<template>
  <div class="chart-connect">
    <el-dialog
      title="多表联动"
      :visible.sync="chartConnectBoxVisible"
      width="70%"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="content">
        <div class="chart-list-title">
          <el-checkbox-group v-model="checkList"  @change="changeGroup" >
            <el-checkbox :disabled="chart.echarts && chart.echarts.group != null" :label="index+'_'+chart.title" v-for="(chart, index) in getChartList" :key="index"></el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="connected">
            <h2 v-show="getGroups.length <= 0">
                暂无任何图表关联
            </h2>

            <ul v-show="getGroups.length > 0">
                <li v-for="(group, index) in getGroups" :key="index">
                    <span>{{group}}</span>
                    <el-button type="danger" plain @click="removeGroup(group)">删除</el-button>
                </li>
            </ul>
        </div>
      </div>
      <div class="group">
          <el-input v-model="group" placeholder="请输入用于联动的标识"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setChartConnectBoxVisible(false)">取 消</el-button>
        <el-button type="primary" @click="connect">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["chartConnectBoxVisible"],
  computed: {
    getCanvasList() {
      return this.$store.state.canvas.canvasList;
    },
    getChartList() {
      let canvasIndex = this.$store.getters.getCanvasActive;
      return this.getCanvasList[canvasIndex].chartList;
    },
    getGroups(){
        let groups = new Set()

        for(let chart of this.getChartList){
            if(chart.echarts && chart.echarts.group)
                groups.add(chart.echarts.group)
        }

        return Array.from(groups)
    }
  },
  data() {
    return {
        checkList: [],
        group:"",
    };
  },

  methods: {
    setChartConnectBoxVisible(val) {
      this.$emit("set-chart-connect-box-visible", val);
    },
    setGroup(title){
        let index =title.split('_')[0]
        
        let data ={
            index,
            group: this.group,
            chartList: this.getChartList,
        }

        this.$store.commit('setGroup', data)
    },
    changeGroup(val){
        console.log(val)
    },

    removeGroup(group){
        let data = {
            group,
            chartList: this.getChartList,
        }
        this.$store.commit('removeGroup', data)
    },
    connect(){
        if(this.checkList.length <= 1){
            this.$message.error("至少需要选中两个需要关联的图表")
            return
        }

        else if(this.group == ""){
            this.$message.error("请填写需要关联的图表的标识")
            return
        }

        for(let val of this.checkList){
            this.setGroup(val)
        }

        this.$echarts.connect(this.group)

        this.checkList = []
        this.group = ""
    }
  },
};
</script>

<style scoped>
.content {
  display: flex;
}

.content .chart-list-title {
  width: 40%;
}

.content .connected {
  width: 60%;
  border-left: 1px solid rgb(197, 193, 193);
  padding-left:8px;
}

.connected ul {
  list-style-type: none;

  padding: 0;
}

.connected ul li{
    display:flex;
    justify-content: space-around;
    align-items: center;
}

.chart-list-title label{
    display:block;
}

.group{
    margin-top:20px;
}
</style>